<!--客户开户表单-->
<template>
  <div class="contain">
    <app-header></app-header>
    <h2 class="form-tit-row" v-if="this.$route.query.mode == null">开通账户</h2>
    <h2 class="form-tit-row" v-if="this.$route.query.mode == 'edit'">维护账户</h2>
    <h2 class="form-tit-row" v-if="this.$route.query.mode == 'view'">查看账号</h2>
    <div class="form-wrap">
      <div class="form-wrap-row">
        <div class="line displayflex">
        <div class="label">公司名称</div> 
        <div class="ipt flex1">
            <input type="text" v-model="CropName" readonly>
        </div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
        <div class="label"><span class="red" v-if="this.$route.query.mode == null">*</span>手机号</div> 
        <div class="ipt flex1">
          <input type="text" placeholder="点击输入" v-model="ContactTel" v-if="this.$route.query.mode == null">
          <input type="text" readonly v-model="ContactTel" v-if="this.$route.query.mode == 'edit'">
          <input type="text" readonly v-model="ContactTel" v-if="this.$route.query.mode == 'view'">
        </div>
        </div>
      </div>
      <div class="form-wrap-row" v-if="this.$route.query.mode != 'view'">
        <div class="line displayflex">
        <div class="label" v-if="this.$route.query.mode == null"><span class="red">*</span>密码</div>
        <div class="label" v-if="this.$route.query.mode == 'edit'"><span class="red">*</span>重设密码</div> 
        <div class="ipt flex1">
          <input type="password" placeholder="点击输入" v-model="pw">
        </div>
        </div>
      </div>
      <div class="form-wrap-row" v-if="this.$route.query.mode != 'view'">
        <div class="line displayflex">
        <div class="label"><span class="red">*</span>确认密码</div> 
        <div class="ipt flex1">
          <input type="password" placeholder="点击输入" v-model="pws">
        </div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
        <div class="label">姓名</div> 
        <div class="ipt flex1">
          <input type="text" placeholder="点击输入" v-model="Contacts" v-if="this.$route.query.mode != 'view'">
          <input type="text" readonly v-model="Contacts" v-if="this.$route.query.mode == 'view'">
        </div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
        <div class="label">部门</div> 
        <div class="ipt flex1">
          <input type="text" placeholder="点击输入" v-model="DeptName" v-if="this.$route.query.mode != 'view'">
          <input type="text" readonly v-model="DeptName" v-if="this.$route.query.mode == 'view'">
        </div>
        </div>
      </div>
      <div class="form-choice" v-if="this.$route.query.mode != 'view'">
        <popup-picker title="性别" :data="sexType.list" :columns="3" v-model="sexType.value" placeholder="请选择" :show-name="sexType.show"></popup-picker>
      </div>
      <div class="form-wrap-row" v-if="this.$route.query.mode == 'view'">
        <div class="line displayflex">
        <div class="label">性别</div> 
        <div class="ipt flex1">{{sexType.value[0] | getSex}}</div>
        </div>
      </div>
    </div>

    <div class="btn-save mt30" v-if="this.$route.query.mode == null" @click="createUser()">完成</div>
    <div class="btn-save mt30" v-if="this.$route.query.mode == 'edit'" @click="updateUser()">完成</div>
  </div>
</template>

<script>
import appHeader from '@/components/core/header/app_header.vue';
export default {
    components: {
        appHeader
    },
    filters: {
        getSex(val) {
        if (!val) {
            return "";
        };
        switch (val) {
            case "1":
                return "男";
                break;
            case "2":
                return "女";
                break;
            }
        }
    },
    data() {
      return{
        staffInfo:[],
        cusInfo: [],
        CropName: '',
        Contacts: '',
        DeptName:'',
        ContactTel:'',
        pw:'',
        pws:'',
        sexType:{
          list: [{
              value: "1",
              name: "男"
          },
          {
              value: "2",
              name: "女"
          }],
          value: [],
          show: true
        },
      };
    },
    created() {
      if(this.$route.query.mode == null){
        document.title = '开通账户';
        this.getData();
      } else if (this.$route.query.mode == "edit") {
        document.title = '维护账号';
        this.getStaffData();
      } else if (this.$route.query.mode == "view") {
        document.title = '查看账号';
        this.getStaffData();
      }
    },
    methods: {
      getStaffData() {
        let userinfo = JSON.parse(localStorage.userinfo),
            self = this,
            qry = {
              StaffID: this.$route.query.Guid
            };
        this.Ajax.post('GetMfstaff', qry).then((resp) => {
          if(resp.IsSuccess){
            this.staffInfo = resp.Data;
            if(this.staffInfo.Sex == null){
              this.staffInfo.Sex = ['1'];
            }
            this.CropName = this.staffInfo.BelongName;
            this.ContactTel = this.staffInfo.LogonUser;
            this.Contacts = this.staffInfo.Name;
            this.DeptName = this.staffInfo.DeptName;
            this.sexType.value.push(this.staffInfo.Sex);
          } else {
            this.Toast({
              message: resp.ErrorMessage || '操作异常，请稍后重试',
            });
          }
        });
      },
      updateUser: function(){
        var self = this;
        var userinfo = JSON.parse(localStorage.userinfo);
        if (this.Contacts === '') {
          this.Toast('请输入联系人的称呼');
          return false;
        }
        var regTel = /^1[345789]\d{9}$/
        if (this.ContactTel == '' || !regTel.test(this.ContactTel)){
          this.Toast('请输入联系人的正确联系方式');
          return false;
        }
        if (this.pw == '') {
          this.Toast('请输入密码');
          return false;
        };
        if(this.pw.length<6){
          this.Toast('密码长度至少6位');
          return false;
        }
        if(this.pws !== this.pw){
          this.Toast('两次填写的密码请保持一致');
          return false;
        }
        let query = {
          StaffID: self.staffInfo.StaffID,
          Pwd: this.pw,
          Name: this.Contacts,
          DeptName: this.DeptName,
          Sex: this.sexType.value[0],
          UpdateUserId: userinfo.StaffID,
          UpdateUserName: userinfo.Name,
        };
        this.Ajax.post('UpdateStaffInfo', query).then((resp) => {
          if (resp.IsSuccess) {
            this.MessageBox({
              confirmButtonText: '返回列表',
              message: '操作已成功，请及时通知客户登录和修改密码',
            }).then(action => {
                this.$router.push({ path: 'custom' });
            });
          } else {
            this.Toast({
              message: resp.ErrorMessage || '操作异常，请稍后重试',
            });
          };
        });
      },
      getData() {
        let self = this,
            qry = {
              Guid: this.$route.query.Guid
            };
        this.Ajax.post('GetMfmedInfo', qry).then((resp) => {
          if(resp.IsSuccess){
            this.cusInfo = resp.Data;
            this.CropName = self.cusInfo.Name,
            this.Contacts = self.cusInfo.LinkMan;
            this.ContactTel = self.cusInfo.ContactTel;
          } else {
            this.Toast({
              message: resp.ErrorMessage || '操作异常，请稍后重试',
            });
          }
        });
      },
      createUser: function() {
        var self = this;
        if (this.Contacts === '') {
          this.Toast('请输入联系人的称呼');
          return false;
        }
        var regTel = /^1[345789]\d{9}$/
        if (this.ContactTel == '' || !regTel.test(this.ContactTel)){
          this.Toast('请输入联系人的正确联系方式');
          return false;
        }
        if (this.pw == '') {
          this.Toast('请输入密码');
          return false;
        };
        if(this.pw.length<6){
          this.Toast('密码长度至少6位');
          return false;
        }
        if(this.pws !== this.pw){
          this.Toast('两次填写的密码请保持一致');
          return false;
        }
        let userinfo = JSON.parse(localStorage.userinfo),
            query = {
              Pwd: this.pw,
              TenantGUID: userinfo.TenantGUID,
              CorpGuid: userinfo.CorpGuid,
              CropName: userinfo.CorpName,
              BelongGuid: this.cusInfo.Guid,
              BelongName: this.cusInfo.Name,
              LogonUser: this.ContactTel,
              Name: this.Contacts,
              Sex: this.sexType.value[0],
              DeptName: this.DeptName,
              UserBizType: "Hospital",
              CreateUserId: userinfo.StaffID,
              CreateUserName: userinfo.Name
            };
        this.MessageBox.confirm('是否确认开通账户？').then(action => {
          this.Ajax.post('RegisterCustomer', query).then((resp) => {
            if (resp.IsSuccess) {
              this.MessageBox({
                confirmButtonText: '返回列表',
                message: '操作已成功，请及时通知客户登录和修改密码',
              }).then(action => {
                this.$router.push({ 
                  path: 'custom' 
                });
              });
            } else {
              this.Toast({
                message: resp.ErrorMessage || '操作异常，请稍后重试',
              });
            };
          });
        }).catch(() => {
          this.query = {};
        });
      },
    },
}
</script>